<template>
 <div class="floating-ai-btn" id="draggableBtn" @click="showExercisePanel">
  <button id="aiPracticeBtn" class="modern-btn">
    <span class="icon">📚</span>
    <span class="text">AI刷题</span>
  </button>
</div>
  <div class="feature-card" @click="showExercisePanel">
          <h3 class="feature-title">AI刷题</h3>
          <p class="feature-description">根据当前文档生成测试题</p>
        </div>
  <!-- <div class="container">
    <button  class="exercise-btn" @click="showExercisePanel">
      <p class="button_text">AI刷题</p>
    </button>
  </div> -->
    <!-- 题目生成面板 -->
    <!-- <div v-if="visiblePanel" class="exercise-panel"> -->
      <el-dialog v-model="visiblePanel" :title= "AI刷题器" style="width: 500px "  :close-on-click-modal="false"  @close="closePanel">
      <!-- <div class="panel-header">
        <h2>AI刷题器</h2>
        <button class="close-btn" @click="closePanel">×</button>
      </div> -->
      <div class="panel-body">
        <div class="input-group">
          <label for="question-num">题目数量</label>
          <input 
            id="question-num"
            type="number" 
            v-model.number="num" 
            min="1" 
            max="50"
            placeholder="1-50"
          >
        </div>
        
       <div class="input-group vertical-group">
  <div class="type-select-row">
    <label>题目类型：</label>
    <select v-model="questionType" class="question-type-select">
      <option value="选择题">选择题</option>
      <option value="解答题">解答题</option>
    </select>

    <button 
      class="generate-from-article-btn"
      @click="generateFromArticle"
    >
      按当前文章生成
    </button>
  </div>

  <input
    type="text"
    v-model="questionclass"
    placeholder="请输入具体类型,例如：java面试题"
    class="type-input"
  />
</div>

        
        <button 
          class="generate-btn"
          @click="generateQuestions"
          :disabled="!isFormValid"
        >
          生成题目
        </button>
      </div>
      
      <!-- 题目弹窗 -->
      <QuizDialog 
        v-model:visible="showQuizDialog"
        :num="num"
        :questionclass="questionclass"
        @submit="handleSubmit"
      />
      <QuizDialogAnswer 
        v-model:visible2="showQuizDialog2"
        :num="num"
        :questionclass="questionclass"
       
        @submit="handleSubmit"
      />
   </el-dialog>
  <!-- </div> -->
   <div v-if="judging" class="judging-overlay">
    <div class="judging-content">
      <div class="judging-spinner"></div>
      <p>生成中</p>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import QuizDialog from '../AI/AIGeneratedQuestionModal.vue'
import QuizDialogAnswer from '../AI/AIAnswerQuestion.vue'
import {currentNodeInfo} from'@/stores/currentNodeStore.ts'
import { useUserStore} from '@/stores/userStore'
import {generateSimplify} from '@/api/modules/axiosApi'

// export { prompt }
const currentNode = currentNodeInfo()
const questionType = ref('选择题')
const num = ref(5)
const questionclass = ref('')
const showQuizDialog = ref(false)
const showQuizDialog2 = ref(false)
const visiblePanel = ref(false)
const visiblePanel2=ref(true)
const prompt = ref('')
const essay=ref('')
const Simplifyessay=ref('')
const loadingVisible = ref(false); // 控制加载弹窗的显示
const judging = ref(false) // 新增判题状态
// 显示加载弹窗
const showLoading = () => {
  loadingVisible.value = true;
};

// 隐藏加载弹窗
const hideLoading = () => {
  loadingVisible.value = false;
};
const isFormValid = computed(() => {
  return num.value > 0 && num.value <= 50 && questionclass.value.trim() !== ''
})
const generateFromArticle = async () => {
   judging.value = true // 开始判题，显示弹窗
  try {
    
    essay.value = currentNode.nodeMarkdown || '';
    
    const simplified = await generateSimplify(essay.value);
    
    Simplifyessay.value = simplified;
    questionclass.value = simplified;
    
    console.log("简化结果:", simplified);
  } catch (error) {
    console.error("生成简化内容失败:", error);
    ElMessage.error('文章简化失败');
  } finally {
    judging.value = false // 无论成功失败都关闭弹窗
  }
};

const showExercisePanel = () => {
  const userStore =  useUserStore() 
  const currentNode= currentNodeInfo()
  visiblePanel.value = true
  visiblePanel2.value=false
  console.log('用户ID:', userStore.user.id)
  console.log('用户ID:', userStore.user)
  console.log('当前页内容:', currentNode.nodeMarkdown)
  
}

const closePanel = () => {
  visiblePanel.value = false
  questionclass.value = ""
  visiblePanel2.value=true
}

const generateQuestions = async() => {
  // prompt=questionclass.value  
  console.log(currentNode.nodeMarkdown)
//   visiblePanel.value=false
    if (isFormValid.value) {
    if (questionType.value === '选择题') {
      showQuizDialog.value = true
    } else {
      showQuizDialog2.value=true
    }
  }
  console.log(prompt);
  
}

const handleSubmit = (result) => {
  // console.log('用户答案:', result.answers)

  alert('答题完成!')
}
</script>

<style scoped>

.floating-ai-btn {
  position: fixed;
  top: 80px;
  right: 15px;
  z-index: 1000;
  filter: drop-shadow(0 4px 12px rgba(79, 70, 229, 0.3));
}

.modern-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #63d9f1 0%, #8B5CF6 100%);
  color: white;
  border: none;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.modern-btn:hover {
  background: linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.modern-btn:active {
  transform: translateY(0);
}

.icon {
  font-size: 18px;
}

.text {
  white-space: nowrap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
}

body {
  background-color: #f5f7fa;
  padding: 15px;
}

.features-container {
  display: flex;
  max-width: 600px;
  margin: 0 auto;
  gap: 20px;
  margin-bottom: 30px;
}

.feature-card {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
  cursor: pointer;
  flex: 1;
  min-width: 250px;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
  background: linear-gradient(135deg, #ffffff 0%, #f0f3ff 100%);
}

.feature-title {
  font-size: 20px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.feature-title:before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 20px;
  background: #ffb44a;
  margin-right: 10px;
  border-radius: 4px;
}

.feature-description {
  font-size: 15px;
  color: #555;
  line-height: 1.5;
  padding-left: 18px; /* Align with the title's accent */
}
.button_text{
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.generate-from-article-btn {
  padding: 6px 12px;
  background: #2196F3;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  margin-left: 8px;
}

.generate-from-article-btn:hover {
  background: #0b7dda;
}
.exercise-btn {
  padding: 5px 8px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  /* font-size: 12px; */
  /* font-weight: bold; */
  /* cursor: pointer; */
  transition: all 0.3s;
  /* box-shadow: 0 2px 3px rgba(0,0,0,0.1); */
  display: flex;
  /* min-width: 33.6px; */
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 5px;
}
.exercise-btn:hover {
  background: #45a049;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.exercise-panel {
  margin-top: 20px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  overflow: hidden;
  transition: all 0.3s ease;
}

.panel-header {
  padding: 16px 24px;
  background: #2c3e50;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-header h2 {
  margin: 0;
  font-size: 20px;
}

.close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
  transition: transform 0.2s;
}

.close-btn:hover {
  transform: scale(1.2);
}

.panel-body {
  padding: 24px;
}

.input-group {
  margin-bottom: 20px;
}

.input-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #555;
}

.input-group input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 16px;
  transition: border 0.3s;
}

.input-group input:focus {
  border-color: #4CAF50;
  outline: none;
  box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
}

.generate-btn {
  width: 100%;
  padding: 12px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  margin-top: 10px;
}

.generate-btn:hover {
  background: #45a049;
}

.generate-btn:disabled {
  background: #cccccc;
  cursor: not-allowed;
  opacity: 0.7;
}
.vertical-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.type-select-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.question-type-select {
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.type-input {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 100%;
}
.judging-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

.judging-content {
  background: white;
  padding: 30px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.judging-spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto 15px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #409eff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

</style>